<template>
  <el-row class="classbody__userClass">
    <el-row class="classbody__title">您的关注</el-row>
    <el-row v-if="!hasUser" class="classbody__userClass__log"
      >您还没有登录不能显示自定义板块</el-row
    >
    <el-row v-else>
      <el-col :span="20">
        <DragSelect
          v-show="isEdit"
          v-model="userClassClone"
          style="width:100%;"
          multiple
          placeholder="请选择板块"
        >
          <el-option
            v-for="(item, index) in allClass"
            :key="index"
            :label="item.name"
            :value="item.name"
          />
        </DragSelect>
        <div v-show="!isEdit">
          <el-tag
            v-for="(item, index) in userClass"
            v-show="hasUserClass"
            :key="index"
            style="margin-right:15px;"
            >{{ item.name }}</el-tag
          >
          <el-tag v-show="!hasUserClass" style="margin-right:15px;"
            >您还没有关注过板块</el-tag
          >
        </div>
      </el-col>
      <el-col :span="4" class="classbody__userClass__edit">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="medium"
          @click="changeUserClass"
        >
          <span v-show="!isEdit">编辑</span>
          <span v-show="isEdit">完成编辑</span>
        </el-button>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import _ from 'lodash'
import DragSelect from './DragSelect'
export default {
  components: {
    DragSelect
  },
  props: {
    hasUser: {
      type: Boolean,
      default: true
    },
    userClass: {
      type: Array,
      default: () => {
        return []
      }
    },
    allClass: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      init: true,
      isEdit: false,
      userClassClone: []
    }
  },
  computed: {
    hasUserClass() {
      return !_.isEmpty(this.userClass)
    }
  },
  methods: {
    changeUserClass() {
      const self = this
      this.changeEdit()
      if (this.init) {
        this.userClassClone = this.userClass.map((item) => {
          return item.name
        })
        this.init = false
      }
      if (!this.isEdit) {
        this.$store.dispatch('classification/setUserClass', {
          data: this.allClass
            .filter((item) => {
              return this.userClassClone.includes(item.name)
            })
            .map((item) => {
              return {
                id: item.id,
                name: item.name
              }
            })
            .sort((item1, item2) => {
              return (
                this.userClassClone.indexOf(item1.name) -
                this.userClassClone.indexOf(item2.name)
              )
            }),
          axios: self.$axios
        })
      }
    },
    changeEdit() {
      this.isEdit = !this.isEdit
    }
  }
}
</script>

<style lang="scss" scoped>
.classbody__userClass__log {
  @include flexCenter;
  @include font(16px, $color: $--color-primary);
}
.classbody__userClass__edit {
  @include flexCenter($jc: flex-end);
}
.classbody__userClass__tag {
  cursor: pointer;
  @include font($color: $--color-primary, $align: center);
}
.classbody__userClass__tag--space {
  margin-left: 6px;
}
</style>
